<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客修改</title>

        <!-- 引入自己写的样式 -->
        <link rel="stylesheet" href="css/conmmon.css">
        <link rel="stylesheet" href="css/blog_edit.css">

        <!-- 引入 editor.md 的依赖 -->
        <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/urltool.js"></script>
        <script src="editor.md/editormd.js"></script>
        <script src="js/logout.js"></script>
    </head>

    <body>
        <!-- 导航栏 -->
        <div class="nav">
            <img src="img/logo2.jpg" alt="">
            <span class="title">我的博客系统</span>
            <!-- 用来占据中间位置 -->
            <span class="spacer"></span>
            <a href="blog_list.html">主页</a>
            <a href="javascript:logout()">注销</a>
        </div>
        <!-- 编辑框容器 -->
        <div class="blog-edit-container">
            <!-- 标题编辑区 -->
            <div class="title">
                <input type="text" id="title" placeholder="在这里写下文章标题">
                <button onclick="mysub()">发布文章</button>
            </div>
            <!-- 创建编辑器标签 -->
            <div id="editorDiv">
                <textarea id="editor-markdown" style="display:none;"></textarea>
            </div>
        </div>

        <script>
            var isSubmit = 1; // 允许提交
            var id = 0; //文章id 
            var editor;
            function initEdit(md) {
                // 编辑器设置
                editor = editormd("editorDiv", {
                    // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                    width: "100%",
                    // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
                    height: "calc(100% - 50px)",
                    // 编辑器中的初始内容
                    markdown: md,
                    // 指定 editor.md 依赖的插件路径
                    path: "editor.md/lib/",
                    saveHTMLToTextarea: true // 
                });
            }
            // initEdit("# 在这里写下一篇博客"); // 初始化编译器的值
            //接口1：先去查询当前文章的信息进行展示
            function initArt() {
                id = getParamBykey("id");
                if (id == null || id <= 0) {
                    isSubmit = 0;
                    alert("抱歉，非法参数！")
                    return false;
                }
                jQuery.ajax({
                    url: "/art/getdetailbyid",
                    type: "POST",
                    data: {
                        "id": id
                    },
                    success: function (res) {
                        if (res.code == 200 && res.data != null && res.data.id > 0) {
                            //文章查询成功
                            jQuery("#title").val(res.data.title);
                            initEdit(res.data.content);
                        } else {
                            // 参数有误
                            isSubmit = 0;
                            alert("抱歉，非法参数！");
                        }
                    }
                });
            }
            initArt(); //页面加载时，触发接口1
            //接口2：提交修改操作
            function mysub() {
                if (isSubmit == 0) {
                    alert("抱歉，非法操作，请刷新当前页面再试！");
                    return false;
                }
                //1.非空判断
                var title = jQuery("#title");
                if (title.val().trim() == "") {
                    alert("请先输入标题！");
                    title.focus();
                    return false;
                }
                var content = editor.getValue(); //获取 md 里面的内容
                if (content == "") {
                    alert("请先输入正文！");
                    return false;
                }
                jQuery.ajax({
                    url: "/art/update",
                    type: "POST",
                    data: {
                        "id": id,
                        "title": title.val(),
                        "content": content
                    },
                    success: function (res) {
                        if (res.code == 200 && res.data == 1) {

                            alert("恭喜：修改成功！");
                            location.href = "myblog_list.html";
                        } else {
                            alert("抱歉，操作失败，请重试！");
                        }
                    }
                })
            }
        </script>
    </body>

</html>